"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/9
 */
import * as React from 'react'
import MyText from "./MyText";
import {autoSize, commonStyles} from "../assets/styles/common";
import MyIcon from "./icon";
import Colors from "../assets/styles/Colors";
import {orderItemStyles} from "../assets/styles/orderItem";
import {OrderItemProps} from "./index";
import {Actions} from "react-native-router-flux";

const {View, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');

class OrderItem extends React.Component<OrderItemProps, any> {
    static defaultProps = {
        style: null,
        name: '新鲜之道店铺',
        phone: '186xxxxxxxx',
        address: '地址：湖北武汉市硚口区凯景国际大厦-古田二路凯景国际大厦',
        onPress: null,
    };

    iconProps = {
        size: autoSize(15),
        color: Colors.Primary
    };

    textProps1 = {
        color: Colors.Black,
        fontSize: 16
    };
    textProps2 = {
        color: Colors.SubTitle,
        fontSize: 13,
        style: {
            marginTop: autoSize(10)
        }
    };

    render() {
        const {name, phone, address, onPress, style} = this.props;

        if(onPress){
            return (
                <TouchableOpacity style={[commonStyles.flexColumn, orderItemStyles.container, style]} onPress={onPress}>
                    <View style={[commonStyles.flexRow]}>
                        <View style={[commonStyles.flex1, commonStyles.flexRow, orderItemStyles.topContainer]}>
                            <MyText {...this.textProps1}>{name}</MyText>
                            <MyText {...this.textProps1} style={{marginLeft: autoSize(15)}}>{phone}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow]}>
                            <TouchableOpacity style={[orderItemStyles.icon, commonStyles.centerVH]} onPress={Actions.location}>
                                <MyIcon name='icon-dingwei' {...this.iconProps}/>
                            </TouchableOpacity>
                            <TouchableOpacity style={[orderItemStyles.icon, commonStyles.centerVH]}>
                                <MyIcon name='icon-dianhua' {...this.iconProps}/>
                            </TouchableOpacity>
                        </View>
                    </View>

                    <MyText {...this.textProps2}>{address}</MyText>
                </TouchableOpacity>
            );
        }else {
            return (
                <View style={[commonStyles.flexColumn, orderItemStyles.container, style]}
                                  activeOpacity={onPress ? 0 : 1}>
                    <View style={[commonStyles.flexRow]}>
                        <View style={[commonStyles.flex1, commonStyles.flexRow, orderItemStyles.topContainer]}>
                            <MyText {...this.textProps1}>{name}</MyText>
                            <MyText {...this.textProps1} style={{marginLeft: autoSize(15)}}>{phone}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow]}>
                            <TouchableOpacity style={[orderItemStyles.icon, commonStyles.centerVH]} onPress={Actions.location}>
                                <MyIcon name='icon-dingwei' {...this.iconProps}/>
                            </TouchableOpacity>
                            <TouchableOpacity style={[orderItemStyles.icon, commonStyles.centerVH]}>
                                <MyIcon name='icon-dianhua' {...this.iconProps}/>
                            </TouchableOpacity>
                        </View>
                    </View>

                    <MyText {...this.textProps2}>{address}</MyText>
                </View>
            );
        }


    }
}

export default OrderItem;